<template>
	<div class="icons">
		<!--<div class="header-bar"></div>
		<div class="header vux-1px-b">
			<div class="back-icon" @click="back">
				<x-icon type="ios-arrow-back" size="22"></x-icon>
			</div>
			请选择图标
		</div>-->
		<div class="content">
			<div class="content-item" v-for="item in icons" @click="selectIcon(item.img_path)">
				<img class="item-img" :src="item.img_path"/>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'moudelIcon',
		props:{
			icons:{
				type:Array,
				default:() =>{
					return []
				}
			},
			moudelId:{
				type	:String,
				default :''
			}
		},
		methods:{
			back(){
				this.$emit('close')
			},
			selectIcon(path){
				let param = {
					id:this.moudelId,
					path:path
				}
				this.$emit('close',param)
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '~vux/src/styles/1px.less';
	.icons{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index:1999;
		overflow-y:scroll;
		background: #fff;
		.header-bar{
			height:.54rem;
		}
		.header{
			position: relative;
			text-align: center;
			font-size: .32rem;
			line-height: .9rem;
			color: #ff1351;
			.back-icon{
				position: absolute;
				left: .2rem;
				top: 0;
				.vux-x-icon{
					margin-top: .24rem;
					fill:#ff1351;
				}
			}
		}
		.content{
			padding: .3rem;
			.content-item{
				float:left;
				margin:.1rem ;
				width:.78rem;
				height:.75rem;
				text-align:center;
				border:1px solid #eee;
				line-height:1rem;
				.item-img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>